<template>
  <v-app id="inspire">
    <v-app-bar app color="deep-purple accent-4" dense dark>
      <v-spacer></v-spacer>
      <v-toolbar-title color="yellow">租房网</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-badge bordered color="error" dot overlap>
        <v-avatar color="blue" size="40">
          <v-icon>mdi-account-circle</v-icon>
        </v-avatar>
      </v-badge>
    </v-app-bar>
    <v-content>
      <v-container fluid>
        <v-row>
          <v-spacer></v-spacer>
          <v-col cols="10">
            <v-card>
              <v-form>
                <div class="d-flex justify-space-between">
                  <div id="Regions&Districts">
                    <v-row>
                      <div class="ml-10 mt-5">
                        <p class="justify-text">区县:</p>
                      </div>
                      <div>
                        <v-checkbox v-model="allRegionSelected" label="全市" class="pl-2" @mouseup="selectAllRegion"></v-checkbox>
                      </div>
                      <div v-for="region in regions" :key="region.regionId" class="pl-2">
                        <v-checkbox
                          v-model="region.isSelected"
                          :label="region.regionName"
                          @mouseup="deselectAllRegion(region.isSelected)"
                        ></v-checkbox>
                      </div>
                    </v-row>
                    <v-row>
                      <div class="ml-10 mt-5 mr-2" v-show="!allRegionSelected">
                        <p class="justify-text">区域:</p>
                      </div>
                      <div v-for="region in regions" :key="region.regionId" class="d-flex">
                        <div v-for="district in region.districts" :key="district.districtId">
                          <v-checkbox v-model="district.isSelected" :label="district.districtName" v-show="region.isSelected"></v-checkbox>
                        </div>
                      </div>
                    </v-row>
                  </div>
                  <div id="Price&Housing">
                    <div class="d-inline-flex pr-10">
                      <v-select suffix="室" v-model="form.bedroomCount" :items="housing.bedroomRange"></v-select>
                      <v-select suffix="厅" v-model="form.livingroomCount" :items="housing.livingroomRange"></v-select>
                      <v-select suffix="卫" v-model="form.washroomCount" :items="housing.washroomRange"></v-select>
                    </div>
                    <div class="d-flex justify-space-around">
                      <v-text-field label="最小月租" v-model="form.minPrice"></v-text-field>
                      <v-text-field label="最大月租" v-model="form.maxPrice"></v-text-field>
                      <v-btn class="white mr-2 mb-5" @click="reset">重置</v-btn>
                      <v-btn class="primary mr-10 mb-5" @click="doSearch">搜索</v-btn>
                    </div>
                  </div>
                </div>
              </v-form>
            </v-card>
          </v-col>
          <v-spacer></v-spacer>
        </v-row>
      </v-container>
      <v-container fluid>
        <v-row v-for="house in houses.slice((currentPage - 1) * 3, (currentPage - 1) * 3 + 3)" :key="house.houseId">
          <v-spacer></v-spacer>
          <v-col cols="10">
            <v-hover v-slot:default="{ hover }">
              <v-card :elevation="hover ? 10 : 0" height="30vh">
                <v-row>
                  <v-col cols="4" class="ml-10">
                    <v-img height="26vh" contain :src="house.imgUrl" v-show="img" />
                  </v-col>
                  <v-col>
                    <v-card-title>{{ house.houseTitle }}</v-card-title>
                    <v-card-text>
                      <div>简介：{{ house.description }}</div>
                      <div>
                        区域：
                        <p class="d-inline" v-for="district in house.districts" :key="district.districtId">
                          {{ district.districtName }}
                        </p>
                      </div>
                    </v-card-text>

                    <v-chip class="primary mr-4">
                      <v-icon>mdi-home</v-icon>
                      {{ house.decoration }}
                    </v-chip>
                    <v-chip>{{ house.bedroomCount }}室 {{ house.livingroomCount }}厅 {{ house.washroomCount }}卫</v-chip>
                  </v-col>
                  <v-col>
                    <div class="mt-4">
                      <span class="red--text display-3">{{ house.price }}</span>
                      <span class="red--text headline">元/月</span>
                    </div>
                    <div class="mt-5">发布日期： {{ house.pubDate }}</div>
                  </v-col>
                </v-row>
              </v-card>
            </v-hover>
          </v-col>
          <v-spacer></v-spacer>
        </v-row>
      </v-container>
      <v-footer>
        <v-row>
          <v-pagination v-model="currentPage" :length="pagination" @input="pageChange"></v-pagination>
        </v-row>
      </v-footer>
    </v-content>
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({})
export default class App extends Vue {
  BaseUrl = 'http://localhost:9090';

  regions = [
    {
      districts: [
        {
          districtId: 0,
          isSelected: false,
        },
      ],
      isSelected: false,
    },
  ];
  districts = [];
  houses = [];
  currentPage = 1;
  housing = {
    bedroomRange: [1, 2, 3, 4, 5, 6],
    livingroomRange: [1, 2, 3, 4],
    washroomRange: [1, 2, 3, 4],
  };
  pagination = 0;
  form = {
    districts: [0],
  };
  allRegionSelected = true;
  img = false;
  async index() {
    await this.$http.get(this.BaseUrl + '/houses').then((res) => {
      this.houses = res.data.houses;
      this.pagination = res.data.pagination;
    });
    await this.$http.get(this.BaseUrl + '/regions').then((res) => {
      this.regions = res.data;
      console.log(this.regions);
    });
    await this.$http.get(this.BaseUrl + '/districts').then((res) => {
      this.districts = res.data;
      console.log(this.districts);
    });
  }
  async postForm() {
    console.log(this.form);
    await this.$http.post(`${this.BaseUrl}/houses`, this.form).then((res) => {
      this.houses = res.data.houses;
      this.pagination = res.data.pagination;
      console.log(this.houses);
    });
  }
  created() {
    this.index();
    this.img = true;
  }
  pageChange() {
    console.log(this.currentPage);
  }
  deselectAllRegion(flag: boolean) {
    if (!flag) this.allRegionSelected = false;
  }
  selectAllRegion() {
    for (let i = 0; i < this.regions.length; i++) {
      this.regions[i].isSelected = false;
      for (let j = 0; j < this.regions[i].districts.length; j++) {
        this.regions[i].districts[j].isSelected = false;
      }
    }
  }
  reset() {
    this.form = {
      districts: [0],
    };
  }
  doSearch() {
    const regions = this.regions;
    this.form.districts = [];
    for (let i = 0; i < regions.length; i++) {
      const districts = regions[i].districts;
      for (let j = 0; j < districts.length; j++) if (districts[j].isSelected) this.form.districts.push(districts[j].districtId);
    }
    console.log(this.form.districts);
    this.postForm();
  }
}
</script>
